<script>
import { main } from '@/util/mixins'
import { mapState } from 'vuex'
import * as service from 'services/x-start/mgr/device'
import SceneTree from '@/components/common/SceneTree'
import { detail } from 'services/x-start/mgr/scene'
export default {
  mixins: [main],
  data() {
    return {
      service,
      visible: false,
      url: null,
      item: {},
      ciId: '',
      visibleDialog: false,
      sceneList: [],
    }
  },
  components: { SceneTree },
  computed: {
    ...mapState({
      typeList: (state) => state.sportList,
    }),
  },
  created() {
    this.getSceneName()
  },
  methods: {
    getSceneName() {
      detail().then((res) => {
        this.sceneList = res.data
      })
    },
    setSceneName(id) {
      if (id) {
        return this.sceneList.find((item) => item.id == id).name
      } else {
        return ''
      }
    },
    sortChange(val) {
      // const { column, ...data } = val
      this.getList({ val })
    },
    pull(id, type) {
      service.pull(id, type).then((res) => {
        this.$message.success('成功')
        this.getList()
      })
    },
    subscribe(id, type) {
      service.subscribe(id, type).then((res) => {
        this.$message.success('成功')
        this.getList()
      })
    },
    refresh(id) {
      service.refresh(id).then((res) => {
        this.$message.success('刷新成功')
        this.getList()
      })
    },
    setLine() {
      let line = this.$refs.line.value
      if (line) {
        this.url = line
        this.item = this.detailInfo
        this.visible = true
      } else {
        this.$message.warning('请填入正确的播流地址')
      }
    },
    saveCoordinate({ line, file }) {
      this.$set(this.detailInfo, 'line', line)
      this.$set(this.detailInfo, 'file', file)
      this.visible = false
    },
    getMatch(id) {
      return (
        this.typeList.find((item) => item.id == id) &&
        this.typeList.find((item) => item.id == id).sportName
      )
    },
    sceneSave(id) {
      this.visibleDialog = false
      this.detailInfo.ciId = id
    },
  },
}
</script>

<template lang="pug">
.device
  VideoRtmp#my-video(
    v-if='visible',
    :visible.sync='visible',
    :url='url',
    :item='item',
    :line='detailInfo.line',
    @saveCoordinate='saveCoordinate'
  )
  SceneTree(
    :visibleDialog.sync='visibleDialog',
    v-if='visibleDialog',
    :ciId='detailInfo.ciId',
    @save='sceneSave'
  )
  Template(
    @sizeChange='handleSizeChange',
    @currentChange='handleCurrentChange',
    :total='total',
    ref='child'
  )
    span(slot='title') 设备管理
    .btns(slot='rightBtn')
      el-button(size='mini', type='primary', plain, @click='detail()') 新建设备
    .list(slot='list')
      el-table(
        ref='table',
        stripe,
        :data='tableData',
        tooltip-effect='dark',
        fit,
        @sort-change='sortChange',
        @selection-change='handleSelectionChange'
      )
        //- el-table-column(prop='name', label='缩略图')
        //-   template(slot-scope='{row}')
        //-     el-popover(placement='top-start', title='大图', trigger='click')
        //-       .download-panel
        //-         img(:src='row.cover', alt='')
        //-       img.cover(:src='row.cover', slot='reference')
        el-table-column(prop='name', label='设备名称')
        el-table-column(prop='type', label='体育类型')
          template(slot-scope='{row}')
            span {{ getMatch(row.type) }}
        el-table-column(prop='personMax', label='极限人数')
        el-table-column(prop='path', label='播流地址')
        el-table-column(prop='tag', label='备注')
        el-table-column(label='操作', fixed='right')
          template(slot-scope='{row}')
            //- Icon(
            //-   title='停止',
            //-   type='icon-more',
            //-   @click='pull(row.id, false)',
            //-   v-if='row.status >= 1'
            //- )
            //- Icon(
            //-   title='启动',
            //-   type='icon-more',
            //-   @click='pull(row.id, true)',
            //-   v-if='row.status < 1'
            //- )
            Icon(
              title='刷新',
              type='icon-more',
              @click='refresh(row.id)',
              v-if='row.status == 5'
            )
            Icon(
              title='取消订阅',
              type='icon-more',
              @click='subscribe(row.id, false)',
              v-if='row.status == 5'
            )
            Icon(
              title='订阅',
              type='icon-more',
              @click='subscribe(row.id, true)',
              v-else
            )
            Icon(title='更多', type='icon-more', @click='detail(row.id, row)')
            Icon(title='删除', type='icon-delete', @click='del(row.id)')
    .detail(slot='detail')
      .group
        .label.must 场景关联：
        .right
          span.width(size='small', v-html='setSceneName(detailInfo.ciId)')
          el-button(
            size='mini',
            type='primary',
            plain,
            @click='visibleDialog = true',
            style='margin-left: 10px'
          ) 设置场景
      .group
        .label.must 设备名称：
        .right
          el-input.width(size='small', v-model='detailInfo.name')
      .group 
        .label.must 体育类型：
        el-select(v-model='detailInfo.type', placeholder='请选择')
          el-option(
            v-for='item in typeList',
            :key='item.sportName',
            :label='item.sportName',
            :value='item.id'
          )
      .group 
        .label.must 极限人数：
        .right
          el-input.width(v-model='detailInfo.personMax')
      .group 
        .label.must 摄像头编码：
        .right
          el-input.width(v-model='detailInfo.imei')
      .group 
        .label.must IP：
        .right
          el-input.width(v-model='detailInfo.ipaddress')
      .group 
        .label.must 端口号：
        .right
          el-input.width(v-model='detailInfo.port')
      //- .group 
      //-   .label.must 订阅id：
      //-   .right
      //-     el-input.width(v-model='detailInfo.createId')
      .group 
        .label.must 播流地址：
        .right
          el-input.width(v-model='detailInfo.path', ref='line')
      .group 
        .label.must 运动面积：
        .right
          el-input.width(v-model='detailInfo.areaMax')
      //- .group 
      //-   .label.must 分界线：
      //-   .right
      //-     el-button(size='mini', type='primary', plain, @click='setLine()') 设置分界线
      //-     span(v-html='detailInfo.line')
      .group 
        .label.must 备注：
        .right
          el-input.width(v-model='detailInfo.tag')
</template>

<style lang="stylus" scoped>
.cover
  max-width 100px
  max-height 100px
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>